<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 30px">
      <el-col :span="6"><el-card>1</el-card></el-col>
      <el-col :span="6"><el-card>1</el-card></el-col>
      <el-col :span="6"><el-card>1</el-card></el-col>
      <el-col :span="6"><el-card>1</el-card></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"> <div id="main" style="width: 400px;height: 400px;margin-left: 50px"></div></el-col>
      <el-col :span="12"> <div id="pei" style="width: 400px;height: 400px;margin-left: 50px"></div></el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';

    export default {
        name: "Home",
      data() {
          return {

          }
      },
      created() {
      },
     mounted() {
       var chartDom = document.getElementById('main');
       var myChart = echarts.init(chartDom);
       var option;
       option = {
         title: {
           text: '个季度注册人数',
           subtext: 'Fake Data',
           left: 'center'
         },
         xAxis: {
           type: 'category',
           data: ['第一季度', '第二季度', '第三季度', '第四季度']
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
             data: [150, 230, 224, 218, 135, 147, 260],
             type: 'line'
           }
         ]
       };
       var peiChartDom = document.getElementById('pei');
       var myChartPei = echarts.init(peiChartDom);
       var peiOption;
       peiOption = {
         title: {
           text: '个季度注册人数',
           subtext: 'Fake Data',
           left: 'center'
         },
         tooltip: {
           trigger: 'item'
         },
         legend: {
           orient: 'vertical',
           left: 'left'
         },
         series: [
           {
             name: 'Access From',
             type: 'pie',
             radius: '50%',
             data: [
             ],
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
                 shadowColor: 'rgba(0, 0, 0, 0.5)'
               }
             }
           }
         ]
       };
       this.request.get("/echarts/user").then(res => {
         console.log(res)
         option.series[0].data = res.data
         option && myChart.setOption(option);

         peiOption.series[0].data = [
           {name: "第一季度",value: res.data[0]},
           {name: "第二季度",value: res.data[1]},
           {name: "第三季度",value: res.data[2]},
           {name: "第四季度",value: res.data[3]},
         ]
         option && myChartPei.setOption(peiOption);
       });



     }
    }
</script>

<style scoped>

</style>